import axios from 'axios'

// 引入Vue
import Vue from 'vue'

// 引入Vuex
import Vuex from 'vuex'

// 在Vue中使用Vuex插件
Vue.use(Vuex)

// 初始化数据
const state = {
    count:0,
    price:999,
    movieList:[]
}

// 更改vuex 的store 中的状态的唯一方法是提交mutation
// mutation的函数的第一个参数就是当前的state对象
// 处理同步函数
const mutations = {
    increment(state){
        state.count++
    },
    // 
    incrementN(state,{n}){
        state.count +=n
    },

    steMovieList(state,payload){
        state.movieList = payload
    }
}

// 处理异步函数
// 不要在action中操作数据
// 当异步完成以后，把数据交给mutation去操作数据
const actions = {
    incrementWait({commit}){
        setTimeout(()=>{
            commit('increment')
        },2000)
    },
    incrementNWait({commit},payload){
        setTimeout(()=>{
            commit('incrementN',payload)
        },2000)
    },
    async getMovieList({commit}){
        const result = await axios.get('https://pcw-api.iqiyi.com/search/recommend/list?channel_id=1&data_type=1&mode=11&page_id=2&ret_num=48&session=b9fd987164f6aa47fad266f57dffaa6a')
        console.log(result);
        commit('steMovieList',result.data.data.list)
    }
}


// 需要从store的state中派生出一些状态，例如对列表进行过滤并计数等
// getters 类似于vue的计算属性
// getter的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算
const getters = {
    myMovieList(state){
        return state.movieList.filter((item)=>{
            return item.albumName.length <5
        })
    },

    setMovieList(state){
        return ({start,end})=>{
            return state.movieList.filter(item=>{
                return item.albumName.length <end&&item.albumName.length>=start
            })
        }
    }

}



export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters
})